import textColorClass from "@/assets/ts/text_color_class"
import { useMemo } from "react";

export type HomeCardProps = {
  name: string,
  num: number,
  bgClass: string
}

const HomeCard = ({ name, num, bgClass }: HomeCardProps) => {

  const bgImage = useMemo(() => {
    return <div
      className={`w-[84px] h-full bg-cover ${bgClass} `}
    ></div>
  }, [bgClass])


  return <div className="w-[170px] h-[60px] mt-[8px] flex gap-[5px]">
    {bgImage}
    <div className="w-[105px] flex flex-col justify-end">
      <div className={`${textColorClass.text_default} text-[14px] font-[400]`}>{name}</div>
      <div className={`${textColorClass.text_default} text-[20px] font-[700]`}>{num}</div>
    </div>
  </div>
}

export default HomeCard